<form class="" action="{{url_for('create_variable',server_id=server.id)}}" method="POST" id="variable_form"  >
    {{ varform.hidden_tag() }}    
    <div class="form-wrapper col-sm-8 offset-sm-2 col-12">
        <legend class="text-center">Add New Variable</legend>
        <div class="form-row">
            <div class="col-sm-6 col-12 mb-3">
                {{ varform.name( class="form-control",value="" ) }}
            </div>
            <div class="col-sm-6 col-12 mb-3" >
                {{ varform.address( class="form-control p-1",value="", style="font-size:1em!important;") }}
            </div>
        </div>
        <div class="form-row">
            <div class="col-sm-6 col-12 mb-3">
                {{ varform.var_object( class="custom-select custom-select-md" ) }}
            </div>
            <div id="value-wrapper" class="col-sm-6 col-12 mb-3">
                <span id="input-box" class="w-10">
                    {{ varform.value( class="form-control " ) }}
                </span>
                <a href="#address" id="refresh-val" class="p-0 btn btn-outline-dark btn-sm" role="button">&nbsp;<i style="width:16px;height:16px;position:relative;top:2px;right:2px" data-feather="loader"></i></a>
            </div>
        </div>
        <div class="form-row">            
            <div class="col-sm-6 col-12 mb-3">
                {{ varform.var_type( class="form-control",value="" ) }}
            </div>
            <div class="col-sm-6 col-12 mb-3">
                <div class="custom-control custom-checkbox">
                    {{ varform.writable( class="custom-control-input",) }}
                    <label class="custom-control-label" for="check_writable">Writable</label>
                </div>
            </div>            
        </div>
        <div class="col-12">
            {{ varform.submit( class="form-control btn-outline-info", style="cursor:pointer" ) }}
        </div>
    </div>
</form>